<template>
  <div>
    <!-- 核心团队人才 -->
    <v-layout>
      <v-flex class="vflex" xs12>
        <v-card class="vcard">
          <v-card-title class="vcard-title"><i></i>核心团队人才</v-card-title>
          <button class="right-icon" @click="showMore">更多人才</button>
          <dl v-if="talentData.length > 0" class="talent-box">
            <dd
              v-for="(item, index) in talentData"
              :key="index"
              @click="toDetails(item)"
            >
              <div>
                <!-- 是否已离职 -->
                <p v-if="item.resign" class="resign-box">离职</p>
                <h4>{{ item.name }}</h4>
                <ul class="basic">
                  <li><span class="tit">所属单位：</span>{{ item.an }}</li>
                  <li>
                    <span class="tit">职务：</span
                    >{{ item.jobs && item.jobs.join("、") }}
                  </li>
                  <li>
                    <span class="tit">专利贡献量：</span>{{ item.doc_count }}
                  </li>
                </ul>
                <ul class="patent-list">
                  <li v-for="(ite, j) in item.rank" :key="j">
                    <span :title="ite.key" class="tit">{{ ite.key }}</span>
                    <span :title="ite.rank" class="content">{{
                      ite.rank
                    }}</span>
                  </li>
                </ul>
              </div>
            </dd>
          </dl>
          <dl v-else class="talent-box">
            <dd class="no-data">
              {{ noData }}
            </dd>
          </dl>
        </v-card>
      </v-flex>
    </v-layout>
    <!-- 人才流动分析 -->
    <v-layout>
      <v-flex class="vflex" xs12>
        <v-card class="vcard">
          <v-card-title class="vcard-title"><i></i>人才流动分析</v-card-title>
          <div class="chart-box">
            <ChartOne :data="talentFlowAllData" />
          </div>
          <ul class="table-box">
            <li class="theader">
              <p>序号</p>
              <p>工程师</p>
              <p>专利量</p>
              <p class="flex2">技术领域</p>
              <p class="flex15">关联企业</p>
              <p>变动状态</p>
              <p>变动时间</p>
            </li>
            <li
              v-for="(item, index) in talentFlowData"
              :key="index"
              class="tbody"
            >
              <p>{{ index + 1 }}</p>
              <p>{{ item.name }}</p>
              <p>{{ item.info.allCount || 0 }}</p>
              <p class="flex2">
                <template v-if="item.child">
                  <span v-for="(ite, j) in item.child" :key="j" class="tag">{{
                    ite.key
                  }}</span>
                </template>
                <template v-else>
                  <span>暂无</span>
                </template>
              </p>
              <p class="flex15">{{ (item.info && item.info.an) || "" }}</p>
              <p>{{ item.state }}</p>
              <p>{{ item.info && item.info.max_ad }}</p>
            </li>
            <li v-if="talentFlowData.length <= 0" class="tbody">
              <p>{{ noData2 }}</p>
            </li>
          </ul>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="ips"
              :current-page.sync="ipi"
              @current-change="getCurrentPage"
              class="el-pagination"
            >
            </el-pagination>
          </div>
        </v-card>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
import ChartOne from "./chart/ChartOne";
import { numFormat } from "@/utils/utils";
export default {
  data() {
    return {
      companyName: this.$cookie.get("companyName") || "",
      talentData: [],
      talentFlowData: [],
      talentFlowAllData: [],
      ipi: 1,
      ips: 5,
      total: 0,
      noData: "数据加载中...",
      noData2: "数据加载中...",
    };
  },
  components: {
    ChartOne,
  },
  methods: {
    // 人才列表
    getTalentList() {
      this.$get(this.$Url.team.talentsList, {
        companyName: this.companyName,
        dataType: "patentPerson",
      })
        .then((res) => {
          let data = res.data || {};
          let patentPerson = data["patentPerson"] || {};
          let talentData = [];
          if (patentPerson) {
            try {
              patentPerson.rank.forEach((v, i) => {
                if (i <= 3) {
                  let child = v.child || [];
                  if (child.length <= 0) {
                    child.push({
                      key: "外观设计",
                    });
                  }
                  talentData.push({
                    name: v.name,
                    key: v.key,
                    doc_count: (v.doc_count && numFormat(v.doc_count)) || 0,
                    an: v.info.an,
                    jobs: v.jobs,
                    rank: child,
                    resign: v.resign,
                    allCount: v.info.allCount,
                  });
                }
              });
              this.talentData = talentData;
            } catch (e) {}

            if (talentData.length <= 0) {
              this.noData = "暂无数据";
            }

            // 人才流动数据
            patentPerson.flow.input.forEach((v) => {
              v.state = "引入";
            });
            this.talentFlowAllData = [
              ...patentPerson.flow.output,
              ...patentPerson.flow.input,
            ];
            this.total = this.talentFlowAllData.length;
            this.talentFlowData = this.talentFlowAllData.slice(
              (this.ipi - 1) * this.ips,
              this.ipi * this.ips
            );
          }

          if (this.talentFlowData.length <= 0) {
            this.noData2 = "暂无数据";
          }
        })
        .catch((err) => {});
    },
    getCurrentPage(val) {
      this.ipi = val;
      this.talentFlowData = this.talentFlowAllData.slice(
        (this.ipi - 1) * this.ips,
        this.ipi * this.ips
      );
    },
    showMore() {
      this.$router.push({
        name: "moreTalent",
      });
    },
    toDetails(item) {
      this.$router.push({
        name: "talentDetails",
        query: {
          key: item.key,
          origin: 0, // 来源代表返回上一级的标识
        },
      });
    },
  },
  mounted() {
    this.getTalentList();
  },
};
</script>

<style lang="scss" scoped>
.vflex {
  margin-bottom: 20px;
  &.right {
    margin-right: 15px;
  }
  .vcard {
    width: 100%;
    height: 100%;
  }
  .vcard-title {
    position: relative;
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    color: $mainColor;
    i {
      position: absolute;
      top: 30px;
      left: 0;
      width: 6px;
      height: 27px;
      background-color: $mainColor;
    }
  }
  .right-icon {
    position: absolute;
    top: 23px;
    right: 0;
    height: 35px;
    line-height: 35px;
    padding: 0 28px;
    margin-right: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: $mainColor !important;
  }
  .talent-box {
    position: relative;
    display: flex;
    width: 100%;
    padding-bottom: 20px;
    box-sizing: border-box;
    dd {
      display: inline-block;
      width: 25%;
      padding-right: 24px;
      box-sizing: border-box;
      cursor: pointer;
      &:nth-child(1) {
        padding-left: 24px;
      }
      > div {
        position: relative;
        padding: 14px 24px;
        background-color: #f7f9fc;
        overflow: hidden;
        &:hover {
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          background-color: #fff;
        }
        .resign-box {
          position: absolute;
          top: 8px;
          right: -27px;
          width: 100px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          color: #fff;
          background-color: #deb887;
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
        }
        h4 {
          padding-bottom: 14px;
          font-size: 20px;
          color: $mainColor;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .basic,
        .patent-list {
          padding-left: 0;
          list-style: none;
          li {
            display: block;
            color: #7674a3;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .tit {
              display: inline-block;
              line-height: 29px;
              font-weight: bold;
              font-size: 14px;
              color: $mainColor;
            }
          }
        }
        .patent-list {
          margin-top: 20px;
          li {
            position: relative;
            display: block;
            padding-left: 35px;
            margin-bottom: 10px;
            &:before {
              position: absolute;
              top: 0;
              left: 0;
              width: 35px;
              height: 29px;
              content: "";
              background-repeat: no-repeat;
              background-position: left center;
              background-size: auto 100%;
            }
            &:nth-of-type(1) {
              &:before {
                background-image: url(../img/team-ranking-01.png);
              }
            }
            &:nth-of-type(2) {
              &:before {
                background-image: url(../img/team-ranking-02.png);
              }
            }
            &:nth-of-type(3) {
              &:before {
                background-image: url(../img/team-ranking-03.png);
              }
            }
            span {
              line-height: 29px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .tit {
              max-width: 60%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .content {
              float: right;
              width: 40%;
              text-align: right;
              letter-spacing: 0px;
            }
          }
        }
      }
    }
  }
}
.table-box {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0 40px 32px;
  li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    p {
      flex: 1;
      margin-bottom: 0;
      text-align: center;
      font-size: 14px;
      color: $mainColor;
      &.flex2 {
        flex: 2;
      }
      &.flex15 {
        flex: 1.5;
      }
    }
    &.theader {
      height: 60px;
      border-top: 1px solid #e6f7f3;
      border-bottom: 1px solid #e6f7f3;
      text-align: center;
      font-weight: bold;
      font-size: 14px;
      color: $mainColor;
      background-color: #e6f7f3;
      p {
        line-height: 60px;
      }
    }
    &.tbody {
      min-height: 24px;
      line-height: 24px;
      border-bottom: 1px dashed #4fc9ae;
      padding: 14px 0;
      &:last-of-type {
        border-bottom: 1px solid #4fc9ae;
      }
      .tag {
        display: inline-block;
        padding: 0 15px;
        border-radius: 14px;
        margin: 5px;
        text-align: center;
        font-size: 12px;
        background-color: #e6f7f3;
      }
    }
  }
}
.pagination {
  width: 100%;
  margin-bottom: 30px;
  text-align: center;
}
.chart-box {
  padding: 0 40px;
}
</style>
